<template>
  <div class="detailDialogContainer" v-if="isDetailDialogShow" v-drag>
    <div class="detailDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">属性纠错上报详细信息</div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="detailDialogContent">
      <div class="contentBox">
        <div class="formRow">
          <div class="search_label">检索条件</div>
        </div>
        <div
          class="formRow"
          style="display: flex; justify-content: space-around"
        >
          <div class="item-style">
            <div>纠错对象</div>
            <div style="width: 70%">
              <select v-model="targetOption" @change="targetSelect">
                <option
                  v-for="item in suggestTargetList"
                  :key="item.adviceObjId"
                  :value="item.adviceObjId"
                >
                  {{ item.adviceObjValue }}
                </option>
              </select>
            </div>
          </div>

          <div class="item-style">
            <div>处理状态</div>
            <div style="width: 70%">
              <select v-model="isHandle" @change="isHandleSelect">
                <option
                  v-for="item in isHandleList"
                  :key="item.adviceObjId"
                  :value="item.adviceObjValue"
                >
                  {{ item.adviceObjValue }}
                </option>
              </select>
            </div>
          </div>
        </div>
        <div class="formRow" style="display: flex">
          <div
            class="item-style"
            style="width: 42%; display: flex; justify-content: flex-start"
          >
            <div style="margin-left: 15px">上报人员</div>
            <input
              style="height: 25px; border-radius: 5px; margin-left: 20px"
              type="text"
              placeholder=""
              v-model="reportPerson"
            />
          </div>
          <div
            class="item-style"
            style="
              width: 50%;
              display: flex;
              justify-content: flex-start;
              margin-right: 15px;
            "
          >
            <div class="label" style="margin-left: 15px">上报时间</div>
            <div style="width: 80%">
              <el-date-picker
                v-model="dateValue"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
          </div>
          <div style="width: 15%; text-align: center">
            <!-- <el-button type="primary" icon="el-icon-search" @click="searchQuery">查询</el-button>
                         -->
            <button
              style="width: 70%; margin-left: 15px"
              type="button"
              @click="searchQuery"
            >
              查询
            </button>
          </div>
        </div>

        <div class="formRow formRow1">
          <div class="search_label">查询列表</div>
        </div>
        <div class="formRow formTable">
          <el-table
            id="dataTable"
            :data="queryResult"
            border
            style="width: 100%;
    height: 50vh;
    overflow: auto;"
          >
            <el-table-column prop="adviceObjValue" label="建议对象" width="100">
            </el-table-column>
            <el-table-column
              prop="adviceContentValue"
              label="建议内容"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="reportPerson" label="上报人员" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="上报时间" width="220">
            </el-table-column>
            <el-table-column prop="isHandle" label="处理状态" width="100">
            </el-table-column>
            <el-table-column prop="adviceFeedbackRemark" label="建议备注">
            </el-table-column>
          </el-table>
        </div>
        <div class="formRow">
          <div class="control" style="display: flex; justify-content: center">
            <button class="smallBtn" type="button" @click="exportForm">
              导出
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAttrErrorContentList,
  getAttrErrorList,
  getFeedbackSuggestDetail,
} from "@/api/systemTool";
import * as XLSX from "xlsx";
import * as FileSaver from "file-saver";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      dateValue: ["2024-01-01", "2025-12-31"],
      suggestTargetList: [],
      targetOption: "",
      adviceTableData: [],
      isHandle: "",
      reportPerson: "",
      isHandleList: [
        { adviceObjId: 1, adviceObjValue: "未处理" },
        { adviceObjId: 2, adviceObjValue: "已处理" },
      ],
      queryResult: [],
    };
  },
  mounted() {
    getAttrErrorList().then((res) => {
      this.suggestTargetList = res.data;
    });
  },

  computed: {
    isDetailDialogShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
  },
  methods: {
    isHandleSelect() {},
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    targetSelect() {
      getAttrErrorContentList(this.targetOption).then((res) => {
        this.targetContentList = res.data;
      });
    },
    exportForm() {
      if (this.queryResult.length == 0) {
        this.$message.warning("暂无可导出的数据!");
        return;
      }
      let tables = document.getElementById("dataTable").cloneNode(true);
      let table_book = XLSX.utils.table_to_book(tables);
      let table_write = XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([table_write], { type: "application/octet-stream" }),
          `属性纠错详细表.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined");
      }
    },
    searchQuery() {
      let params = {
        adviceObjId: this.targetOption,
        isHandle: this.isHandle,
        reportPerson: this.reportPerson,
        startTime: this.dateValue[0],
        endTime: this.dateValue[1],
      };
      getFeedbackSuggestDetail(params).then((res) => {
        this.queryResult = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detailDialogContainer {
  width: 45vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: 28vw;
  height: 46vh;
  z-index: 2;
  .detailDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .detailDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
    .contentButton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px; /* 与下半部分内容的间距 */
      .menuButton {
        width: 50%;
        text-align: center;
      }
      .menuButton.active {
        // color: rgb(8, 46, 82);
        border-bottom: 2px solid white;
      }
    }
    .contentBox {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .formRow {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .search_input {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          input {
            width: 80%;
          }
        }
      }
      .formRow1 {
        background-color: #4070a2;
        .search_label {
        }
        .showAllList {
          margin-left: 15vw;
        }
      }

      .formTable {
        table {
          border-collapse: collapse;
          border: 1px solid white;
          width: 23vw;
          height: 30vh;
          overflow: auto;
          .table-cell {
            height: 5vh;
          }
          .table-row {
            display: table-row;
          }
        }

        table tbody tr {
          border: 1px solid white;
        }

        table td {
          overflow: auto;
          line-height: 5vh;
        }
      }
      .label {
        width: 100px;
        margin-right: 10px;
      }
      .control {
        flex-grow: 1;
        .pickup-btn {
          width: 20%;
          margin-left: 1rem;
        }
        .pickup-btn1 {
          margin-left: 12.3rem;
        }
        .smallBtn {
          width: 4.5rem;
          margin-left: 88px;
        }
        .data-container {
          display: flex;
          justify-content: space-between;
          background-color: #4070a2;
          border-bottom: 1px solid white;
        }
        .data-container:hover {
          background-color: #03366c;
        }
      }

      select,
      textarea,
      button {
        width: 100%;
        color: white !important;
        background-color: #4070a2;
        border: none; /* 去除边框 */
        outline: none; /* 去除焦点时的轮廓线 */
        font-size: 0.8rem;
        height: 1.5rem;
      }

      button {
        margin-right: 10px; /* 按钮之间的间距 */
      }
      button:hover {
        background-color: #4998f2;
      }
      button:focus {
        background-color: #4998f2;
      }
      textarea {
        height: 5rem;
      }

      /* 最后一行的按钮不需要 label，可以单独设置样式 */
      .formRow:last-child {
        justify-content: flex-end;
      }

      .formRow:last-child .button {
        margin-left: 10px; /* 按钮之间的间距，而不是右边距 */
      }
    }
  }
}

.item-style {
  width: 50%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
